<template>
    <div class="express-template">
        <div class="li" v-for="(region,r_index) in tableData" :key="region.title">
            <div class="left">
                <el-checkbox :indeterminate="region.indeterminate" v-model="region.is_disabled"   @change="((val)=>{ level_one(val,r_index) })" >{{region.title}}</el-checkbox>
            </div>
            <div>
                <el-popover
                class="popover"
                v-for="(p,p_index) in region['-']" 
                :key="p.id"
                placement="bottom-start"
                width="200"
                :tabindex="9999"
                trigger="hover">
                <div class="list">
                    <el-checkbox v-model="c.is_disabled" :checked="c.is_disabled" class='item' v-for="(c,c_index) in p['-']" :key="c.id" style="margin-right:15px;" slot="reference" @change="((val)=>{ level_three(val,r_index,p_index,c_index) })" >{{c.title}}</el-checkbox>
                </div>
                <el-checkbox :indeterminate="p.indeterminate" v-model="p.is_disabled"  class="reference" slot="reference" @change="((val)=>{ level_two(val,r_index,p_index) })" >{{p.title}}<i class="el-icon-arrow-down el-icon--right"></i></el-checkbox>
            </el-popover>
            </div>
        </div>
    </div>
</template>

<script>
import cityData from "@/assets/json/area.json"
import template from "@/assets/json/template.json"
export default {
    name:"ExpressTemplate",
    data() {
        return {
            tableData:[]
        }
    },
    watch:{
        freight_template_id:{
            immediate:true,
            handler(val){
                if(val === ''){
                    this.getData();
                }else{
                    this.init(val);
                }
            }
        }
    },
    computed:{
        region(){
            let arr = [];
            if(this.tableData.length > 0){
                this.tableData.forEach((r)=>{
                    r['-'].forEach((p)=>{
                        if(p.is_disabled || p.indeterminate === true){
                            arr.push(p.id)
                            p['-'].forEach((c)=>{
                                if(c.is_disabled){
                                    arr.push(c.id)
                                    c['-'].forEach((area)=>{
                                        arr.push(area.id)
                                    })
                                }
                            })
                        }
                    })
                })
            }
            return arr
        },
        region_str(){
            let arr = [];
            if(this.tableData.length > 0){
                this.tableData.forEach((r)=>{
                    r['-'].forEach((p)=>{
                        if(p.is_disabled || p.indeterminate === true){
                            arr.push(p.title)
                            // p['-'].forEach((c)=>{
                            //     if(c.is_disabled){
                            //         arr.push(c.title)
                            //     }
                            // })
                        }
                    })
                })
            }
            return arr.join(',')
        },
       
    },
    methods:{
        level_one(val,index){
            this.tableData[index].indeterminate = false
            this.tableData[index]['-'].forEach((p)=>{
                 p.is_disabled = val
                 p.indeterminate = false;
                p['-'].forEach((c)=>{
                    c.is_disabled = val
                    c.indeterminate = false;
                })
            })           
            this.$forceUpdate();
            // this.tableData = this.tableData;
            // this.tableData[index].is_disabled = val
        },
        level_two(val,r_index,p_index){
            this.tableData[r_index]['-'][p_index].indeterminate = false;
            this.tableData[r_index]['-'][p_index].is_disabled = val;
            this.tableData[r_index]['-'][p_index]['-'].forEach((c)=>{
                c.is_disabled = val
            })
            let chooseAll = this.tableData[r_index]['-'].every((p)=>{ return p.is_disabled === true })
            this.tableData[r_index].is_disabled = chooseAll;
            if(chooseAll === true){
                this.tableData[r_index].indeterminate = false
            }else{
                this.tableData[r_index].indeterminate = this.tableData[r_index]['-'].some((p)=>{ return p.is_disabled === true })
            }
            this.$forceUpdate();
            //  this.tableData = this.tableData;
        },
        level_three(val,r_index,p_index,c_index){
            this.tableData[r_index]['-'][p_index]['-'][c_index].is_disabled = val;
            let chooseAll = this.tableData[r_index]['-'][p_index]['-'].every((item)=>{  return item.is_disabled === true });//是否全选
            this.tableData[r_index]['-'][p_index].is_disabled = chooseAll;
            if(chooseAll === true){
                 this.tableData[r_index]['-'][p_index].indeterminate =false;
            }else{
               this.tableData[r_index]['-'][p_index].indeterminate = this.tableData[r_index]['-'][p_index]['-'].some((item)=>{  return item.is_disabled === true })//是否有选中
            }
            this.$forceUpdate();
            // this.tableData = this.tableData;
        },
         async init(freight_template_id){
            try {
                let detail = template;
                let data = cityData;
                let regions = detail.data.distribution_areas[0].region;
                let arr = [];
                for (const key in data) {
                    data[key].forEach((p)=>{
                        p.indeterminate = false
                    })
                    arr.push({
                        title:key,
                        level:0,
                        indeterminate:false,
                        is_disabled:false,
                        '-':data[key]
                    })
                }
                if(regions.length === 0){
                    this.$message({
                        message:'该模板无法编辑',
                        type:'warning'
                    })
                    return
                }
                arr.forEach((r)=>{
                    r['-'].forEach((p)=>{
                        if(regions.indexOf(p.id) === -1){
                            p.is_disabled = false
                        }
                        p['-'].forEach((c)=>{
                            if(regions.indexOf(c.id) === -1){
                                c.is_disabled = false
                            }
                            c['-'].forEach((a)=>{
                                if(regions.indexOf(a.id) === -1){
                                    a.is_disabled = false
                                }
                            })
                        })
                    })
                })
                arr.forEach((r)=>{
                    if(r['-'].every((p)=>{ return p.is_disabled === false })){
                        r.is_disabled = false
                    }else{
                        r.is_disabled = true
                    }
                })
                this.tableData = arr
            } catch (error) {
                console.log(error)
            }
        },

        // 无模板id
        getData(){
            let arr = [];
            let data = cityData;
            for (const key in data) {
                data[key].forEach((p)=>{
                    p.indeterminate = false
                })
                arr.push({
                    title:key,
                    level:0,
                    indeterminate:false,
                    is_disabled:true,
                    '-':data[key]
                })
            }
            this.tableData = arr
        }
    }
}
</script>

<style lang="scss" scoped>
.express-template{
    width: 100%;
    .li{
        @include flexbox(flex-start);
        @include p(20,20);
        border-bottom: 1px solid #999999;
        .left{
            width: 120px;
        }
        .popover{
            padding-right: 20px;
        }
        .item{
            display: inline-block;
            width: 200px;
            @include mb(10);
        }
    }    
}
</style>